<template style="overflow: hidden">
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 : </span>
        </el-col>
        <el-col :span="20">
          <span class="hand textactive">菜单设置</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable">
      <el-row type="flex" justify="center">
        <el-col :span="23" style="margin-top: 12px;">
          <el-col>
            <el-row class='pertree'>
              <el-col style="width: 268px;height: 674px;background-color:#f4f7f9;">
                <div
                  style="border-bottom: 1px solid #b5b8ba;overflow: hidden;margin-left: 10px;margin-right: 10px;color: #b5b8ba;height: 38px;line-height: 38px;">
                  <div style="float: left;">
                    <el-switch
                      v-model="dataOrModule"
                      active-text="模块"
                      inactive-text="数据">
                    </el-switch>
                  </div>
                  <div style="float: right;cursor: pointer;">
                    <i class="el-icon-plus" @click="addmenu"></i>
                    <i class="iconfont icon-bianji" @click="editmenuname"></i>
                    <i class="iconfont icon-shanchu" @click="deletemenu"></i>
                  </div>
                </div>
                <div class="treebox">
                  <el-tree
                    style="margin: 0 auto;width: 80%;"
                    :data="data1"
                    ref="tree"
                    node-key="id"
                    default-expand-all
                    :props="defaultProps"
                    highlight-current
                    @node-click="handleNodeClick"
                    :expand-on-click-node=false
                  >
                  </el-tree>
                </div>
              </el-col>
              <el-col class="permiss" v-if="!dataOrModule">
                <div v-if="!nodata">
                  <div style="float: right;margin-bottom: 10px;">
                  <el-row type="flex" justify="space-between" style="margin-top: 10px;" class="btn">
                    <el-input
                      style="width: 136px;margin-top: -1px;"
                      size="small"
                      placeholder="查找"
                      v-model.trim="inputValueD"
                      @keydown.enter.native="searchMsgD"
                    >
                      <i
                        slot="suffix"
                        class="el-input__icon el-icon-search"
                        style="cursor: pointer;"
                        @click="searchMsgD"
                      ></i>
                    </el-input>
                    <div style="margin-left: 28px;margin-right: 12px;">
                      <el-button
                        class="add"
                        size="small"
                        round
                        @click="addHead"
                      >新增
                      </el-button>
                    </div>
                  </el-row>
                  </div>
                    <div v-if="herdata.length !== 0">
                      <el-table
                        highlight-current-row
                        class="tablelist"
                        ref="headtable"
                        :data="herdata.slice((currentPage1-1)*pagesize1,currentPage1*pagesize1)"
                        border
                      >
                        <el-table-column
                          prop="name"
                          label="数据名称"
                        >
                        </el-table-column>

												<el-table-column
												  prop="nameEn"
												  label="数据别名"
												>
												</el-table-column>

                        <el-table-column
                          prop="id"
                          label="数据id"
                        >
                        </el-table-column>
                        <el-table-column
                          label="操作"
                        >
                          <template slot-scope="scope">
                            <span style="color: #1198ff;cursor: pointer;">
                              <i class="iconfont icon-bianji" @click="editHeadData(scope.row)"></i>
                              <i class="iconfont icon-shanchu" @click="deleteHeadData(scope.row.id)"></i>
                            </span>
                          </template>
                        </el-table-column>
                      </el-table>
                      <div class="pager">

                        <el-pagination
                          @size-change="handleSizeChangeD"
                          @current-change="pagehandleCurrentChangeD"
                          :current-page="currentPage1"
                          :page-sizes="[5,10,15]"
                          :page-size="pagesize1"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="totalcount1"
                        >
                        </el-pagination>
                      </div>

                    </div>
                    <div v-if="herdata.length == 0"
                         style="background-color: #fff;text-align: center;padding-top: 100px;">
                      <img src="../../../static/image/leida.png" alt="">
                      <p style="color: #767676;margin-top: 30px;">暂无内容!</p>
                    </div>
                </div>
  
                <div v-if="nodata">
                  <div style="background-color: #fff;text-align: center;padding-top: 100px;">
                    <img src="../../../static/image/leida.png" alt="">
                    <p style="color: #767676;margin-top: 30px;">暂无内容!</p>
                  </div>
                </div>
              </el-col>
              <el-col class="permiss" v-if="dataOrModule">
                <div v-if="!nodata">
                  <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="tabs">
                    <el-tab-pane
                    v-for="(item, index) in perdata"
                    :name="item.id"
                    :key="index" >
                    <span slot="label" style="float: left;">
                      <div style="width: 98px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;display: inline-block;">
                        <span>{{item.name}}</span>
                        <span>({{item.modularId}})</span>
                      </div>
                      <span style="float: right;line-height: 40px;color: #747776;margin-left: 5px;">
                        <i class="iconfont icon-xiugai" @click="editmoduler(item.id,item.name,item.modularId)"></i>
                        <i class="el-icon-delete" @click="deletemoduler(item.id)"></i>
                      </span>
                    </span>
                    <div v-if="Sectionsdata.length !== 0">
                      <el-table
                        highlight-current-row
                        class="tablelist"
                        ref="mailtable"
                        :data="Sectionsdata.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                        border
                      >
                        <el-table-column
                          prop="name"
                          label="组件名称"
                        >
                        </el-table-column>

												<el-table-column
												  prop="type"
												  label="组件类型"
												>
												</el-table-column>
                        <el-table-column
                          prop="sectionId"
                          label="组件id"
                        >
                        </el-table-column>
                        <el-table-column
                          label="操作"
                        >
                          <template slot-scope="scope">
                            <span style="color: #1198ff;cursor: pointer;">
                              <i class="iconfont icon-bianji" @click="editsection(scope.row)"></i>
                              <i class="iconfont icon-shanchu" @click="deletesection(scope.row.id)"></i>
                            </span>
                          </template>
                        </el-table-column>
                      </el-table>
                      <div class="pager">

                        <el-pagination
                          @size-change="handleSizeChange"
                          @current-change="pagehandleCurrentChange"
                          :current-page="currentPage"
                          :page-sizes="[5,10,15]"
                          :page-size="pagesize"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="totalcount"
                        >
                        </el-pagination>
                      </div>

                    </div>
                    <div v-if="Sectionsdata.length == 0"
                         style="background-color: #fff;text-align: center;padding-top: 100px;">
                      <img src="../../../static/image/leida.png" alt="">
                      <p style="color: #767676;margin-top: 30px;">暂无内容!</p>
                    </div>
                  </el-tab-pane>
                    <el-tab-pane name="forth" disabled>
                      <span slot="label" style="color: #1099fe;cursor: pointer;float: left;" @click="add"><i class="el-icon-plus"></i> <span>新增模块</span> </span>
                      <div style="background-color: #fff;text-align: center;padding-top: 100px;">
                        <img src="../../../static/image/leida.png" alt="">
                        <p style="color: #767676;margin-top: 30px;">暂无内容!</p>
                      </div>
                    </el-tab-pane>
                  </el-tabs>

                  <div style="position: absolute;right: 0;top: -4px;">
                    <el-row type="flex" justify="space-between" style="margin-top: 10px;" class="btn">
                      <el-input
                        style="width: 136px;margin-top: -1px;"
                        size="small"
                        placeholder="查找"
                        v-model.trim="inputValue"
                        @keydown.enter.native="searchMsg"
                      >
                        <i
                          slot="suffix"
                          class="el-input__icon el-icon-search"
                          style="cursor: pointer;"
                          @click="searchMsg"
                        ></i>
                      </el-input>
                      <div style="margin-left: 28px;margin-right: 12px;">
                        <el-button
                          class="add"
                          size="small"
                          round
                          @click="addSect"
                        >新增
                        </el-button>
                      </div>
                    </el-row>
                  </div>

                </div>

                <div v-if="nodata">
                  <div style="background-color: #fff;text-align: center;padding-top: 100px;">
                    <img src="../../../static/image/leida.png" alt="">
                    <p style="color: #767676;margin-top: 30px;">暂无内容!</p>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-col>
      </el-row>
    </div>
    <!--    新增菜单弹出框-->
    <el-dialog
      title="新增菜单"
      :visible.sync="addmenuVisible"
      width="415px"
      :before-close="addmenuClose"
      class="addroledialog"
    >
      <div style="text-align: left">
        <el-form label-position="top" ref="addmenu" :model="addmenuform" :rules="addmenurule" style="padding:0px 50px;">
          <el-form-item prop="name" label="菜单名称">
            <el-input placeholder="请输入菜单名称" v-model.trim="addmenuform.name" style="width: 274px"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" :disabled="addmenudis" round @click="addmenusend('addmenu')">确 定</el-button>
    <el-button round @click="addmenuClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>


    <el-dialog
      title="错误"
      :visible.sync="noeditdialogVisible"
      width="30%"
      :before-close="noClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">该菜单禁止修改!</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round @click="noClose">确 定</el-button>
    <el-button round @click="noClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>

    <!--    修改菜单的弹出框-->
    <el-dialog
      title="修改菜单"
      :visible.sync="editmenuVisible"
      width="415px"
      :before-close="editmenuClose"
      class="addroledialog"
    >
      <div style="text-align: left">
        <el-form label-position="top" ref="editmenu" :model="editmenuform" :rules="editmenurule"
                 style="padding:0px 50px;">
          <el-form-item prop="name" label="菜单名称">
            <el-input placeholder="请修改菜单名称" v-model.trim="editmenuform.name" style="width: 274px"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" :disabled="editmenudis" round @click="editmenusend('editmenu')">确 定</el-button>
    <el-button round @click="editmenuClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>

    <!--    删除菜单弹出框-->
    <el-dialog
      title="删除"
      :visible.sync="deletedialogVisible"
      width="30%"
      :before-close="deleteClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">是否确认删除该菜单?</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round :disabled="delmenudis" @click="deletesend">确 定</el-button>
    <el-button round @click="deleteClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>

    <!--    新增模块弹出框-->
    <el-dialog
      title="新增模块"
      :visible.sync="adddialogVisible"
      width="415px"
      :before-close="addClose"
      class="addroledialog"
    >
      <div style="text-align: left">
        <el-form label-position="top" ref="addform" :model="addform" :rules="rules" style="padding:0px 50px;">
          <el-form-item prop="name" label="模块名称">
            <el-input placeholder="请输入模块名称" v-model.trim="addform.name" style="width: 274px"></el-input>
          </el-form-item>
          <el-form-item prop="id" label="模块id">
            <el-col>
              <el-input
                v-model.trim="addform.id"
                placeholder="请输入模块id"
                style="width: 274px">
              </el-input>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" :disabled="adddis" round @click="addsend('addform')">确 定</el-button>
    <el-button round @click="addClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
    <!--    修改模块弹出框-->
    <el-dialog
      title="修改模块"
      :visible.sync="editdialogVisible"
      width="415px"
      :before-close="editClose"
      class="addroledialog"
    >
      <div style="text-align: left">
        <el-form label-position="top" ref="editform" :model="editform" :rules="rules" style="padding:0px 50px;">
          <el-form-item prop="name" label="模块名称">
            <el-input placeholder="请输入模块名称" v-model.trim="editform.name" style="width: 274px"></el-input>
          </el-form-item>
          <el-form-item prop="id" label="模块id">
            <el-col>
              <el-input
                v-model.trim="editform.id"
                placeholder="请输入模块id"
                style="width: 274px">
              </el-input>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" :disabled="editdis" round @click="editsend('editform')">确 定</el-button>
    <el-button round @click="editClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>

    <!--    删除模块弹出框-->
    <el-dialog
      title="删除"
      :visible.sync="delmoduledialogVisible"
      width="30%"
      :before-close="deletemoduleClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">是否确认删除该模块?</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round :disabled="delmoduledis" @click="delmodulesend">确 定</el-button>
    <el-button round @click="deletemoduleClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
    <!--    新增组件弹出框-->
    <el-dialog
      title="新增"      this.currentPage = 1;
      :visible.sync="addSectionVisible"
      width="415px"
      :before-close="addSectionClose"
      class="addroledialog"
    >
      <div style="text-align: left">
        <el-form label-position="top" ref="addSectionform" :model="addSectionform" :rules="addSectionrules"
                 style="padding:0px 50px;">

					<el-form-item prop="cttype" label="组件类型">
					  <el-select v-model="addSectionform.cttype" placeholder="请选择" style="width: 274px">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" >
							</el-option>
					</el-select>
					</el-form-item>

          <el-form-item prop="name" label="组件名称">
            <el-input placeholder="请输入组件名称" v-model.trim="addSectionform.name" style="width: 274px"></el-input>
          </el-form-item>
          <el-form-item prop="id" label="组件id">
            <el-col>
              <el-input
                v-model.trim="addSectionform.id"
                placeholder="请输入组件id"
                style="width: 274px">
              </el-input>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" :disabled="addSectiondis" round
                      @click="addSectionsend('addSectionform')">确 定</el-button>
    <el-button round @click="addSectionClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="新增"
      :visible.sync="addDataVisible"
      width="415px"
      :before-close="addDataClose"
      class="addroledialog"
    >
      <div style="text-align: left">
        <el-form label-position="top" ref="addDataform" :model="addDataform" :rules="addDatarules"
                 style="padding:0px 50px;">

					<el-form-item prop="name" label="中文名">
            <el-input placeholder="请输入数据项名称" v-model.trim="addDataform.name" style="width: 274px"></el-input>
					</el-form-item>

          <el-form-item prop="nameEn" label="别名">
            <el-input placeholder="请输入数据项别名" v-model.trim="addDataform.nameEn" style="width: 274px"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" :disabled="addDatadis" round
                      @click="addDatasend('addDataform')">确 定</el-button>
    <el-button round @click="addDataClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
    <!--    修改组件弹出框-->
    <el-dialog
      title="修改"
      :visible.sync="editSectionVisible"
      width="415px"
      :before-close="editSectionClose"
      class="addroledialog"
    >
      <div style="text-align: left">
        <el-form label-position="top" ref="editSectionform" :model="editSectionform" :rules="editSectionrules"
                 style="padding:0px 50px;">

					<el-form-item prop="type" label="组件类型">
					  <el-select v-model="editSectionform.type" placeholder="请选择" style="width: 274px">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" >
							</el-option>
					</el-select>
					</el-form-item>

          <el-form-item prop="name" label="组件名称">
            <el-input placeholder="请输入组件名称" v-model.trim="editSectionform.name" style="width: 274px"></el-input>
          </el-form-item>
          <el-form-item prop="id" label="组件id">
            <el-col>
              <el-input
                v-model.trim="editSectionform.id"
                placeholder="请输入组件id"
                style="width: 274px">
              </el-input>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" :disabled="editSectiondis" round
                      @click="editSectionsend('editSectionform')">确 定</el-button>
    <el-button round @click="editSectionClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="修改"
      :visible.sync="editDataVisible"
      width="415px"
      :before-close="editDataClose"
      class="addroledialog"
    >
      <div style="text-align: left">
        <el-form label-position="top" ref="editDataform" :model="editDataform" :rules="editDatarules"
                 style="padding:0px 50px;">

					<el-form-item prop="name" label="中文名">
            <el-input placeholder="请输入数据项名称" v-model.trim="editDataform.name" style="width: 274px"></el-input>
					</el-form-item>

          <el-form-item prop="nameEn" label="别名">
            <el-input placeholder="请输入数据项别名" v-model.trim="editDataform.nameEn" style="width: 274px"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" :disabled="editDatadis" round
                      @click="editDatasend('editDataform')">确 定</el-button>
    <el-button round @click="editDataClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>

    <!--    删除组件弹出框-->
    <el-dialog
      title="删除"
      :visible.sync="delSectionVisible"
      width="30%"
      :before-close="delSectionClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">是否确认删除该组件?</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round :disabled="delSectiondis" @click="delSectionsend">确 定</el-button>
    <el-button round @click="delSectionClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="删除"
      :visible.sync="delDataVisible"
      width="30%"
      :before-close="delDataClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">是否确认删除该数据?</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round :disabled="delDatadis" @click="delDatasend">确 定</el-button>
    <el-button round @click="delDataClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="错误"
      :visible.sync="errordialogVisible"
      width="30%"
      :before-close="errorClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">三级菜单不得增加下级菜单!</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round @click="errorClose">确 定</el-button>
    <el-button round @click="errorClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="错误"
      :visible.sync="delerror"
      width="30%"
      :before-close="deleteerrorClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">不得删除有子菜单的菜单!</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round @click="deleteerrorClose">确 定</el-button>
    <el-button round @click="deleteerrorClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="错误"
      :visible.sync="mainerror"
      width="30%"
      :before-close="maineerrorClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">第一个菜单禁止删除!</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round @click="maineerrorClose">确 定</el-button>
    <el-button round @click="maineerrorClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>


    <el-dialog
      title="错误"
      :visible.sync="seconderror"
      width="30%"
      :before-close="seconderrorClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">该菜单下没有模块，不能添加组件!</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round @click="seconderrorClose">确 定</el-button>
    <el-button round @click="seconderrorClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
    <!--  模块组件或者菜单名称或者id重复时的提示-->
    <el-dialog
      title="错误"
      :visible.sync="error"
      width="30%"
      :before-close="errorinfoClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">{{errorinfo}}!</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round @click="errorinfoClose">确 定</el-button>
    <el-button round @click="errorinfoClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>


  </div>
</template>

<script>
  import axios from 'axios';
  
  export default {
    name: "menuset",
    data() {
      return {
        // 开关按钮控制 显示数据还是模块
        dataOrModule:true,
        //树形结构的数据
        data1: [{
          id: 0,
          icon: '',
          inde: '',
          url: '',
          name: '招聘管理系统',
          children: []
        }],
        //设置树形结构所使用的变量名
        defaultProps: {
          children: "children",
          label: "name"
        },
        //树形结构高亮元素的数据
        currentNodeData: null,
        //新增菜单弹出框的变量
        addmenuVisible: false,
        //新增菜单发送按钮disabled的变量
        addmenudis: false,
        addDatadis: false,
        //新增菜单的表格数据
        addmenuform: {
          name: ''
        },
        //新增菜单表格的校验
        addmenurule: {
          'name': [
            {required: true, message: '请输入菜单名称', trigger: 'blur'}
          ],
        },
        //修改菜单的表格数据
        editmenuform: {
          name: ''
        },
        //修改菜单表格的校验
        editmenurule: {
          'name': [
            {required: true, message: '请修改菜单名称', trigger: 'blur'}
          ],
        },
        //修改菜单发送按钮的disabled的变量
        editmenudis: false,
        //tabs标签的数据
        perdata: [],
        // 表头tabs标签的数据
        herdata:[],
        //tabs标签高亮的变量
        activeName: null,
        //搜索框的变量
        inputValue: '',
        inputValueD: '',

        //新增模块的表格数据
        addform: {
          name: '',
          id: ''
        },
        //新增模块弹出框的变量
        adddialogVisible: false,
        //新增模块发送按钮disabled的变量
        adddis: false,
        //修改模块的表格数据
        editform: {
          name: '',
          id: ''
        },
        //修改模块弹出框的变量
        editdialogVisible: false,
        //修改模块发送按钮disabled的变量
        editdis: false,
        //模块的表格校验
        rules: {
          'name': [
            {required: true, message: '请输入模块名称', trigger: 'blur'}
          ],
          'id': [
            {required: true, message: '请输入模块id', trigger: 'blur'},
            {
              pattern: /(^\d*$)/, message: '模块id为数字格式的数据', trigger: 'blur'
            }
          ],
        },

        //新增组件的表格数据
        addSectionform: {
          name: '',
          id: '',
					cttype:''
        },
				 options: [{
          value: '按钮',
          label: '按钮'
        }, {
          value: '输入框',
          label: '输入框'
        }],
        //新增组件表格的校验
        addSectionrules: {
					'cttype': [
					  {required: true, message: '请选择组件类型', trigger: 'change'}
					],
          'name': [
            {required: true, message: '请输入组件名称', trigger: 'blur'}
          ],
          'id': [
            {required: true, message: '请输入组件id', trigger: 'blur'},
            {
              pattern: /(^\d*$)/, message: '组件id为数字格式的数据', trigger: 'blur'
            }
          ],
        },
        //新增组件发送按钮disabled的变量
        addSectiondis: false,
        //新增组件的弹出框的变量
        addSectionVisible: false,
        //新增数据弹出框变量
        addDataVisible:false,
        addDataform:{
          name: '',
					nameEn:''
        },
        addDatarules: {
					'name': [
					  {required: true, message: '请输入数据名称', trigger: 'blur'}
					],
          'nameEn': [
            {required: true, message: '请输入数据别名', trigger: 'blur'}
          ],
        },
        //修改组件表格数据
        editSectionform: {
          name: '',
          id: '',
					type:''
        },
        editDataform: {
          name: '',
					nameEn:''
        },
        //修改组件表格的校验
        editSectionrules: {
          'type': [
            {required: true, message: '请选择组件类型', trigger: 'change'}
          ],
          'name': [
            {required: true, message: '请输入组件名称', trigger: 'blur'}
          ],
          'id': [
            {required: true, message: '请输入组件id', trigger: 'blur'},
            {
              pattern: /(^\d*$)/, message: '组件id为数字格式的数据', trigger: 'blur'
            }
          ],
        },
        editDatarules: {
          'name': [
					  {required: true, message: '请输入数据名称', trigger: 'blur'}
					],
          'nameEn': [
            {required: true, message: '请输入数据别名', trigger: 'blur'}
          ],

        },
        //修改组件发送按钮的disabled变量
        editSectiondis: false,
        editDatadis:false,
        //修改组件弹出框的变量
        editSectionVisible: false,
        editDataVisible: false,
        //删除组件的弹出框变量
        delSectionVisible: false,
        delDataVisible:false,
        //删除组件发送按钮disabled的变量
        delSectiondis: false,
        delDatadis:false,
        //删除组件的id
        delSectionid: null,
        delDataid:null,
        //组件表格的数据
        Sectionsdata: [],
        //表格数据的总条数
        totalcount: null,
        //一页展示的数据的条数
        pagesize: 15,
        //表格当前页
        currentPage: 1,
        //表格数据的总条数
        totalcount1: null,
        //一页展示的数据的条数
        pagesize1: 15,
        //表格当前页
        currentPage1: 1,
        //当前行
        currentRow: null,
        //修改组件的id
        editsecid: null,
        editDataid:null,
        //添加和修改菜单所需的变量
        id: '',
        icon: '',
        faurl: '',
        inde: '',
        //对三级菜单增加下级元素的警告弹出框的变量
        errordialogVisible: false,
        //删除菜单弹出框的变量
        deletedialogVisible: false,
        //删除模块弹出框的变量
        delmoduledialogVisible: false,
        //删除模块发送按钮disabled的变量
        delmoduledis: false,
        //删除模块的id
        delmoduleid: null,
        //修改菜单弹出框的变量
        editmenuVisible: false,
        //禁止修改第一个菜单的警告弹出框的变量
        noeditdialogVisible: false,
        //删除菜单发送按钮disabled的变量
        delmenudis: false,
        //对删除有子元素的菜单的警告弹出框的变量
        delerror: false,
        //禁止删除第一个菜单的警告弹出框的变量
        mainerror: false,
        //对无模块添加组件的警告弹出框的变量
        seconderror: false,
        error: false,
        errorinfo: '',
        //树形菜单的数据，用于比较，不参与页面布局
        list: [],
        //选中模块的id
        modularId: null,
        nodata : false,
      }
    },
    created() {
      axios.post(this.url + '/system/menu/selectAllMenu').then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.data1[0].children = res.data.data;
          this.list = res.data.data;
          for (var i = 0; i < res.data.data.length; i++) {
            if (i == 0) {
              if(res.data.data[i].children !== null){
                for (var j = 0; j < res.data.data[i].children.length; j++) {
                  if (j == 0) {
                    var idkey = res.data.data[i].children[j].id;
                    this.currentNodeData = res.data.data[i].children[j];
                    this.$nextTick(() => {
                      this.$refs.tree.setCurrentKey(idkey);
                    })
                  }
                }
              }else{
                var idkey = res.data.data[i].id;
                this.currentNodeData = res.data.data[i];
                this.$nextTick(() => {
                  this.$refs.tree.setCurrentKey(idkey);
                })
              }

            }
          }
          this.getModulars();
        }
      })
    },
    methods: {
      // 获取数据列表
      getData(){
        axios.post(this.url + "/system/menu/getDataByMenu",{
          menuId:this.currentNodeData.id,
          condition:this.inputValueD
        }).then(res =>{
          this.unlogin(res.data.code)
          if(res.data.code == 200){
            this.herdata = res.data.data;
            this.totalcount1 = this.herdata.length;
            if(this.currentPage1 > Math.ceil(this.totalcount1/this.pagesize1)){
              this.currentPage1 = Math.ceil(this.totalcount1/this.pagesize1);
            }
          }
        })
      },
      searchMsgD(){
        this.currentPage1 = 1;
        this.getData();
      },
      // 数据新增
      addHead(){
        this.addDataVisible = true;
        document.documentElement.style.overflow = "hidden"
      },
      //获取树形菜单的数据
      getlist() {
        axios.post(this.url + '/system/menu/selectAllMenu').then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.data1[0].children = res.data.data;
            this.list = res.data.data;
            this.$refs.tree.setCheckedKeys([]);
            if (this.currentNodeData) {
              for (var i = 0; i < res.data.data.length; i++) {
                if (i == 0) {
                  for (var j = 0; j < res.data.data[i].children.length; j++) {
                    if (this.currentNodeData.id == res.data.data[i].children[j].id) {
                      this.currentNodeData = res.data.data[i].children[j];
                    }
                  }
                }
              }
            } else {
              for (var i = 0; i < res.data.data.length; i++) {
                if (i == 0) {
                  for (var j = 0; j < res.data.data[i].children.length; j++) {
                    if (j == 0) {
                      this.currentNodeData = res.data.data[i].children[j];
                    }
                  }
                }
              }
            }
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(this.currentNodeData.id);
            })
          }
        })
      },
      getlist1() {
        axios.post(this.url + '/system/menu/selectAllMenu').then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.data1[0].children = res.data.data;
            this.list = res.data.data;
            this.$refs.tree.setCheckedKeys([]);
            if (this.currentNodeData) {
              for (var i = 0; i < res.data.data.length; i++) {
                if (i == 0) {
                  for (var j = 0; j < res.data.data[i].children.length; j++) {
                    if (this.currentNodeData.id == res.data.data[i].children[j].id) {
                      this.currentNodeData = res.data.data[i].children[j];
                    }
                  }
                }
              }
            } else {
              for (var i = 0; i < res.data.data.length; i++) {
                if (i == 0) {
                  for (var j = 0; j < res.data.data[i].children.length; j++) {
                    if (j == 0) {
                      this.currentNodeData = res.data.data[i].children[j];
                    }
                  }
                }
              }
            }
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(this.currentNodeData.id);
            })
            if(!this.dataOrModule){
              this.nodata = false;
              this.currentPage1 = 1;
              this.getData();
            }else{
              this.currentPage = 1;
              this.nodata = false;
              this.getModulars()
            }
            if(this.currentNodeData.name == this.data1[0].name){
              this.nodata = true;
            }
          }
        })
      },
      //获取获取菜单下模块数据
      getModulars() {
        this.perdata = [];
        axios.post(this.url + '/system/menu/getModularsByMenu', {
          menuId: this.currentNodeData.id
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.perdata = res.data.data;
            if (this.perdata.length > 0) {
              this.activeName = res.data.data[0].id;
              this.modularId = res.data.data[0].id;
              this.currentPage = 1;
              this.Sectionsdata = [];
              this.getSections();
            } else if (this.perdata.length == 0) {
              this.Sectionsdata = [];
              this.activeName = 'forth';
              this.modularId = null;
            }
          }
        })
      },
      //新增菜单
      addmenu() {
        if (this.currentNodeData.children == null) {
          document.documentElement.style.overflow = 'hidden';
          this.errordialogVisible = true;
        } else {
          this.addmenudis = false;
          document.documentElement.style.overflow = 'hidden';
          this.addmenuVisible = true;
        }
      },
      //显示修改菜单弹出框
      editmenuname() {
        if (this.currentNodeData.name == this.data1[0].name) {
          document.documentElement.style.overflow = 'hidden';
          this.noeditdialogVisible = true;
        } else {
          this.addmenudis = false;
          document.documentElement.style.overflow = 'hidden';
          this.editmenuVisible = true;
          this.editmenuform.name = this.currentNodeData.name;
        }
      },
      //发送新增菜单的请求
      addmenusend(formName) {
        this.id = '';
        this.icon = '';
        this.faurl = '';
        this.inde = '';
        if (this.currentNodeData) {
          this.addmenudis = true;
          if (this.currentNodeData.children !== null) {
            if (this.currentNodeData.name == this.data1[0].name) {
              this.id = this.currentNodeData.children[0].pid;
              this.icon = this.currentNodeData.icon;
              this.faurl = this.currentNodeData.url;
              this.inde = this.currentNodeData.inde;
            } else {
              this.id = this.currentNodeData.id;
              this.icon = this.currentNodeData.icon;
              this.faurl = this.currentNodeData.url;
              this.inde = this.currentNodeData.inde;
            }
          }
      
          this.$refs[formName].validate((valid) => {
            if (valid) {
              axios.post(this.url + '/system/menu/addMenu', {
                name: this.addmenuform.name,
                pid: this.id,
                icon: this.icon,
                url: this.faurl,
                inde: this.inde
              }).then(res => {
                this.unlogin(res.data.data);
                if (res.data.code == 200) {
                  if (res.data.data == "success") {
                    this.addmenudis = false;
                    this.$refs.addmenu.resetFields();
                    document.documentElement.style.overflow = 'auto';
                    this.addmenuVisible = false;
                    this.getlist();
                  } else {
                    this.addmenudis = false;
                    this.$refs.addmenu.resetFields();
                    this.addmenuVisible = false;
                    document.documentElement.style.overflow = 'hidden';
                    this.errorinfo = res.data.data;
                    this.error = true;
                  }
                }
              })
            }
          })
        }
      },
      //发送修改菜单的请求
      editmenusend(formName) {
        this.id = '';
        this.icon = '';
        this.faurl = '';
        this.inde = '';
        if (this.currentNodeData) {
          if (this.currentNodeData.children !== null) {
            this.id = this.currentNodeData.pid;
            this.icon = this.currentNodeData.icon;
            this.faurl = this.currentNodeData.url;
            this.inde = this.currentNodeData.inde;
          } else if (this.currentNodeData.children == null) {
            for (var i = 0; i < this.list.length; i++) {
              for (var j = 0; j < this.list[i].children.length; j++) {
                if (this.currentNodeData.id == this.list[i].children[j].id) {
                  this.id = this.list[i].pid;
                  this.icon = this.list[i].icon;
                  this.faurl = this.list[i].url;
                  this.inde = this.list[i].inde;
                }
              }
            }
          }
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.editmenudis = true;
              axios.post(this.url + '/system/menu/updateMenu', {
                id: this.currentNodeData.id,
                name: this.editmenuform.name,
                Id: this.id,
                icon: this.icon,
                url: this.faurl,
                inde: this.inde
              }).then(res => {
                this.unlogin(res.data.data);
                if (res.data.code == 200) {
                  if (res.data.data == "success") {
                    this.editmenudis = false;
                    this.$refs.editmenu.resetFields();
                    document.documentElement.style.overflow = 'auto';
                    this.editmenuVisible = false;
                    this.getlist();
                  } else {
                    this.editmenudis = false;
                    this.$refs.editmenu.resetFields();
                    this.editmenuVisible = false;
                    document.documentElement.style.overflow = 'hidden';
                    this.errorinfo = res.data.data;
                    this.error = true;
                  }
                }
              })
            }
          })
        }
      },
      //关闭修改菜单的弹出框
      editmenuClose() {
        this.editmenudis = false;
        document.documentElement.style.overflow = 'auto';
        this.editmenuVisible = false;
      },
      //新增模块
      add(){
        document.documentElement.style.overflow = 'hidden';
        this.adddialogVisible = true;
      },
      //发送新增模块的请求
      addsend(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.adddis = true;
            axios.post(this.url + '/system/menu/addModular', {
              menuId: this.currentNodeData.id,
              name: this.addform.name,
              modularId: this.addform.id
            }).then(res => {
              this.unlogin(res.data.code);
              if (res.data.code == 200) {
                if (res.data.data == "success") {
                  this.adddis = false;
                  document.documentElement.style.overflow = 'auto';
                  this.adddialogVisible = false;
                  this.getModulars();
                  this.$refs.addform.resetFields();
                } else {
                  this.adddis = false;
                  this.$refs.addform.resetFields();
                  this.adddialogVisible = false;
                  document.documentElement.style.overflow = 'hidden';
                  this.errorinfo = res.data.data;
                  this.error = true;
                }
              }
            })
          }
        })
      },
      //关闭新增模块的弹出框
      addClose() {
        this.$refs.addform.resetFields();
        this.adddis = false;
        document.documentElement.style.overflow = 'auto';
        this.adddialogVisible = false;
      },
      //修改模块信息弹出框
      editmoduler(id, name, moduleId) {
        this.delmoduleid = id;
        this.editform.name = name;
        this.editform.id = moduleId;
        document.documentElement.style.overflow = 'hidden';
        this.editdialogVisible = true;
      },
      //发送修改模块的请求
      editsend(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.editdis = true;
            axios.post(this.url + '/system/menu/upModular', {
              id: this.delmoduleid,
              name: this.editform.name,
              modularId: this.editform.id
            }).then(res => {
              this.unlogin(res.data.code);
              if (res.data.code == 200) {
                if (res.data.data == "success") {
                  this.editdis = false;
                  this.delmoduleid = null;
                  this.$refs.editform.resetFields();
                  document.documentElement.style.overflow = 'auto';
                  this.editdialogVisible = false;
                  this.getModulars();
                } else {
                  this.editdis = false;
                  this.delmoduleid = null;
                  this.$refs.editform.resetFields();
                  this.editdialogVisible = false;
                  document.documentElement.style.overflow = 'hidden';
                  this.errorinfo = res.data.data;
                  this.error = true;
                }
              }
            })
          }
        })
      },
      //关闭修改模块的弹出框
      editClose() {
        this.delmoduleid = null;
        this.$refs.editform.resetFields();
        this.editdis = false;
        document.documentElement.style.overflow = 'auto';
        this.editdialogVisible = false;
      },
      //关闭禁止修改第一个菜单的提示的弹出框
      noClose() {
        document.documentElement.style.overflow = 'auto';
        this.noeditdialogVisible = false;
      },
      //关闭新增菜单弹出框
      addmenuClose() {
        this.addmenudis = false;
        this.$refs.addmenu.resetFields();
        document.documentElement.style.overflow = 'auto';
        this.addmenuVisible = false;
      },
      //关闭删除菜单弹出框
      deleteClose() {
        this.delmenudis = false;
        document.documentElement.style.overflow = 'auto';
        this.deletedialogVisible = false;
      },
      //禁止删除有子菜单的弹出框
      deleteerrorClose() {
        document.documentElement.style.overflow = 'auto';
        this.delerror = false;
      },
      //删除第一个菜单警告的弹出框
      maineerrorClose() {
        document.documentElement.style.overflow = 'auto';
        this.mainerror = false;
      },
      //新增菜单、模块和组件相同名称和id的提示
      errorinfoClose() {
        this.errorinfo = null;
        document.documentElement.style.overflow = 'auto';
        this.error = false;
      },
      //发送删除菜单的请求
      deletesend() {
        this.delmenudis = true;
        axios.post(this.url + '/system/menu/deleteMenu', {
          id: this.currentNodeData.id
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.delmenudis = false;
            document.documentElement.style.overflow = 'auto';
            this.deletedialogVisible = false;
            this.$refs.tree.setCurrentKey([]);
            this.currentNodeData = null;
            this.getlist1();
          }
        })
      },
      delDataClose(){
        this.delDataVisible = false;
        document.documentElement.style.overflow = "auto"
      },
      //删除菜单
      deletemenu() {
        if (this.currentNodeData) {
          //没有子菜单的情况
          if (this.currentNodeData.children == null) {
            document.documentElement.style.overflow = 'hidden';
            this.deletedialogVisible = true;
          }
          //有子菜单并且子菜单有数据
          if (this.currentNodeData.children !== null && this.currentNodeData.children.length !== 0) {
            if (this.currentNodeData.name == this.data1[0].name) {
              this.mainerror = true;
              document.documentElement.style.overflow = 'auto';
            } else {
              this.delerror = true;
              document.documentElement.style.overflow = 'auto';
            }
          }
          //有子菜单但子菜单无数据
          if (this.currentNodeData.children !== null && this.currentNodeData.children.length == 0) {
            document.documentElement.style.overflow = 'hidden';
            this.deletedialogVisible = true;
          }
        }
      },
      //删除模块弹出框
      deletemoduler(id) {
        this.delmoduleid = id;
        document.documentElement.style.overflow = 'hidden';
        this.delmoduledialogVisible = true;
      },
      //发送删除模块的请求
      delmodulesend() {
        this.delmoduledis = true;
        axios.post(this.url + '/system/menu/delModular', {
          id: this.delmoduleid
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.delmoduledis = false;
            this.delmoduleid = null;
            document.documentElement.style.overflow = 'auto';
            this.delmoduledialogVisible = false;
            this.getModulars();
          }
        })
      },
      //关闭删除模块弹出框
      deletemoduleClose() {
        this.delmoduledis = false;
        this.delmoduleid = null;
        document.documentElement.style.overflow = 'auto';
        this.delmoduledialogVisible = false;
      },
      //获取模块下的组件信息
      getSections() {
        axios.post(this.url + '/system/menu/getSections', {
          modularId: this.modularId,
          condition: this.inputValue
        }).then(res => {
          this.unlogin(res.data.code);
          this.Sectionsdata = [];
          if (res.data.code == 200) {
            this.Sectionsdata = res.data.data;
            this.totalcount = this.Sectionsdata.length;
            if(this.currentPage > Math.ceil(this.totalcount/this.pagesize)) {
              this.currentPage = Math.ceil(this.totalcount / this.pagesize);
            }
          }
        })
      },
      //搜索功能
      searchMsg() {
        this.currentPage = 1;
        this.getSections();
      },
      //新增模块下组件的弹出框
      addSect() {
        if (this.modularId !== null) {
          this.addSectiondis = false;
          document.documentElement.style.overflow = 'hidden';
          this.addSectionVisible = true;
        } else {
          document.documentElement.style.overflow = 'hidden';
          this.seconderror = true;
        }
      },
      //菜单下没有模块的提示
      seconderrorClose() {
        document.documentElement.style.overflow = 'auto';
        this.seconderror = false;
      },
      // 发送新增数据的请求
      addDatasend(formName){
        this.$refs[formName].validate((valid) => {
          if(valid){
            this.addDatadis = false;
            axios.post(this.url + "/system/menu/addData",{
              name:this.addDataform.name,
              nameEn:this.addDataform.nameEn,
              menuId:this.currentNodeData.id
            }).then(res =>{
              this.unlogin(res.data.code)
              if(res.data.code == 200){
                this.addDataVisible = false;
                document.documentElement.style.overflow = "auto";
                this.currentPage1 = 1;
                this.getData();
                this.addDatadis = true;
                this.$refs.addDataform.resetFields();
              }
            })
          }
        })
      },
      addDataClose() {
        this.$refs.addDataform.resetFields();
        document.documentElement.style.overflow = 'auto';
        this.addDataVisible = false;
      },
      //发送新增组件的请求
      addSectionsend(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
              this.addSectiondis = true;
              axios.post(this.url + '/system/menu/addSection', {
                modularId: this.modularId,
                sectionId: this.addSectionform.id,
                name: this.addSectionform.name,
                type: this.addSectionform.cttype
              }).then(res => {
                this.unlogin(res.data.code);
                if (res.data.code == 200) {
                  if (res.data.data == "success") {
                    this.inputValue = '';
                    this.currentPage = 1;
                    this.getSections();
                    this.$refs.addSectionform.resetFields();
                    this.addSectiondis = false;
                    document.documentElement.style.overflow = 'auto';
                    this.addSectionVisible = false;
                  } else {
                    this.$refs.addSectionform.resetFields();
                    this.addSectiondis = false;
                    this.addSectionVisible = false;
                    document.documentElement.style.overflow = 'hidden';
                    this.errorinfo = res.data.data;
                    this.error = true;
                  }
                }
              })
            }
          }
        )
      },
      //关闭新增组件的弹出框
      addSectionClose() {
        this.$refs.addSectionform.resetFields();
        this.addSectiondis = false;
        document.documentElement.style.overflow = 'auto';
        this.addSectionVisible = false;
      },
      //修改组件
      editsection(row) {
        this.editsecid = row.id;
        this.editSectionform.id = row.sectionId;
        this.editSectionform.name = row.name;
				this.editSectionform.type = row.type;
        this.editSectiondis = false;
        document.documentElement.style.overflow = 'hidden';
        this.editSectionVisible = true;
      },
      editHeadData(row){
        this.editDataid = row.id;
        this.editDataform.nameEn = row.nameEn;
        this.editDataform.name = row.name;
        this.editDatadis = false;
        document.documentElement.style.overflow = 'hidden';
        this.editDataVisible = true;
      },
      //修改组件发送请求
      editSectionsend(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
              this.editSectiondis = true;
              axios.post(this.url + '/system/menu/updateSection', {
                id: this.editsecid,
                modularId: this.modularId,
                sectionId: this.editSectionform.id,
                name: this.editSectionform.name,
                type: this.editSectionform.type
              }).then(res => {
                this.unlogin(res.data.code);
                if (res.data.code == 200) {
                  if(res.data.data == 'success'){
                    this.$refs.editSectionform.resetFields();
                    this.editSectiondis = false;
                    document.documentElement.style.overflow = 'auto';
                    this.editSectionVisible = false;
                    this.getSections();
                  }else{
                    this.$refs.editSectionform.resetFields();
                    this.editSectiondis = false;
                    this.editSectionVisible = false;
                    document.documentElement.style.overflow = 'hidden';
                    this.errorinfo = res.data.data;
                    this.error = true;
                  }
              }
              })
            }
          }
        )
      },
      editDatasend(formName){
        this.$refs[formName].validate((valid) => {
          if(valid){
            this.editDatadis = true;
            axios.post(this.url + "/system/menu/updateData",{
              id: this.editDataid,
              nameEn: this.editDataform.nameEn,
              name: this.editDataform.name,
              menuId:this.currentNodeData.id
            }).then(res =>{
              this.unlogin(res.data.code)
              if(res.data.code == 200){
                this.$refs.editDataform.resetFields();
                this.editDatadis = false;
                document.documentElement.style.overflow = 'auto';
                this.editDataVisible = false;
                this.getData();
              }
            })
          }
        })
      },
      //关闭修改组件的弹出框
      editSectionClose() {
        this.$refs.editSectionform.resetFields();
        this.editSectiondis = false;
        document.documentElement.style.overflow = 'auto';
        this.editSectionVisible = false;
      },
      editDataClose(){
        this.$refs.editDataform.resetFields();
        this.editDatadis = false;
        document.documentElement.style.overflow = 'auto';
        this.editDataVisible = false;
      },
      //删除组件
      deletesection(id) {
        this.delSectionid = id;
        this.delSectiondis = false;
        document.documentElement.style.overflow = 'hidden';
        this.delSectionVisible = true;
      },
      deleteHeadData(id){
        this.delDataid = id;
        this.delDatadis = false;
        document.documentElement.style.overflow = 'hidden';
        this.delDataVisible = true;
      },
      //删除组件发送请求
      delSectionsend() {
        this.delSectiondis = true;
        axios.post(this.url + '/system/menu/delSection', {
          id: this.delSectionid
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.getSections();
            this.delSectionid = null;
            this.delSectiondis = false;
            document.documentElement.style.overflow = 'auto';
            this.delSectionVisible = false;
          }
        })
      },
      delDatasend(){
        this.delDatadis = true;
        axios.post(this.url + "/system/menu/delData",{
          id: this.delDataid
        }).then(res =>{
          this.unlogin(res.data.code)
          if(res.data.code == 200){
            this.getData();
            this.delDatadis = false;
            this.delDataid = null;
            document.documentElement.style.overflow = 'auto';
            this.delDataVisible = false;
          }
        })
      },
      //关闭删除组件的弹出框
      delSectionClose() {
        this.delSectiondis = false;
        document.documentElement.style.overflow = 'auto';
        this.delSectionVisible = false;
      },
      //tabs标签的点击事件
      handleClick(tab, event) {
        this.inputValue = '';
        this.modularId = tab.name;
        this.currentPage = 1;
        this.getSections();
      },
      //三级菜单下添加下级菜单的提示
      errorClose() {
        document.documentElement.style.overflow = 'auto';
        this.errordialogVisible = false;
      },
      //树形结构节点的点击事件
      handleNodeClick(data) {
        this.inputValue = '';
        this.currentNodeData = data;
        if(!this.dataOrModule){
          this.nodata = false;
          this.currentPage1 = 1;
          this.getData();
        }else{
          this.currentPage = 1;
          this.nodata = false;
          this.getModulars()
        }
        if(this.currentNodeData.name == this.data1[0].name){
          this.nodata = true;
        }
      },
      //修改表格分页的展示条数
      handleSizeChange(val) {
        this.pagesize = val
      },
      handleSizeChangeD(val) {
        this.pagesize1 = val
      },
      //修改表格分页的当前页
      pagehandleCurrentChange(val) {
        this.currentPage = val
      },
      pagehandleCurrentChangeD(val) {
        this.currentPage1 = val
      },
    },
    watch: {
      "inputValue": function (val) {
        if (val == "") {
          this.currentPage = 1;
          this.getSections();
        }
      },
      "inputValueD": function (val) {
        if (val == "") {
          this.currentPage1 = 1;
          this.getData();
        }
      },
      "dataOrModule":function(val){
        if(this.currentNodeData.name !== this.data1[0].name){
          if(!val){
            this.nodata = false;
            this.currentPage1 = 1;
            this.getData();
          }else{
            this.currentPage = 1;
            this.nodata = false;
            this.getModulars()
          }
        }else{
          this.nodata = true;
        }
      }
    }
  }
</script>

<style scoped>
	.permiss .el-tabs--card >>> .el-tabs__header{
		/*max-width: 76rem;*/
		height: 1.4375rem;
	}

	/deep/ .el-tabs__header {
    padding: 0 0 1rem 0;
    position: relative;
    margin: 0 0 0px;
    height: 100%;
	}

	.el-tabs--card >>> .el-tabs__header .el-tabs__nav {
    border: 0px solid #E4E7ED;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	}

	.el-tabs--top.el-tabs--card >>> .el-tabs__header .el-tabs__item:last-child {
    border-right: 1px #E4E7ED solid;
	}

  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }

  .posttable {
    min-height: 800px;
    background-color: #fff;
  }

  .textactive {
    color: #1099ff;
  }

  .perset {
    width: 180px;
  }

  .treebox {
    margin-top: 12px;
    height: 595px;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .add {
    width: 65px;
    height: 30px;
    padding: 7px 15px !important;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
  }

  .add:hover {
    color: #fff !important;
  }

  .add:focus {
    color: #fff !important;
  }

  .pager {
    margin-top: 20px;
  }

  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .permiss i {
    font-size: 14px;
  }

  .permiss span {
    font-size: 14px;
  }

  .permiss {
    background-color: #f4f7f9;
    width: 77%;
    margin-left: 15px;
    position: relative;
  }
  .tabs{
    width: 100%;
  }
  @media screen and (min-width: 1200px) and (max-width: 1900px) {
    .permiss {
      width: 77%;
    }
  }

  @media only screen and (min-width: 1920px) {
    .permiss {
      width: 84%;
    }
  }
</style>
